<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>记事本</title>
    <script src="./js/vue.js"></script>
    <style>
        body {
            background-color: #dddddd;
        }

        #title {
            text-align: center;
            font-size: 30px;
            color: #cb7a7a;
        }

        #app {
            margin: 20px auto;
            height: 300px;
            width: 600px;
            border: 1px solid #000;
            border-radius: 10px;
            box-shadow: 0 0 10px #000;
            background-color: whitesmoke;
        }

        #inputText {
            width: 580px;
            height: 80px;
            background-color: #cb7a7a;
            margin: 10px auto;
            border-radius: 10px;
        }

        #inputText-text {
            width: 440px;
            height: 70px;
            margin: 4px;
            border-radius: 10px 0 0 10px;
            font-size: 35px;
            padding-left: 20px;
            color: darkgray;
            border: 0;
            font-style: italic;
        }

        #inputText-bt {
            position: absolute;
            background-color: #cb7a7a;
            border: 0;
            color: whitesmoke;
            font-size: 20px;
            width: 100px;
            height: 70px;
            padding-top: 10px;
        }

        #mesgP {
            width: 550px;
            color: darkgray;
            margin: -8px auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #arrShow {
            width: 580px;
            margin: 0 auto;
            height: 160px;
            overflow-y: auto;
        }
        .arrs{
            position: relative;
            font-size: 25px;
            color: darkgray;
            padding-left: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid darkgray ;
        }
        .arrs span:nth-child(2){
            padding-left: 20px;
        }
        .arrs span:nth-child(3){
            position: absolute;
            right: 10px;
            top: -10px;
            color: #cb7a7a;
        }
        .arrs span:last-child:hover,.cle:hover{
            color: red;
            cursor: pointer;
        }
        .disp{
            display: none;
        }
    </style>
</head>
<body>
<p id="title">记事本</p>
<div id="app">
    <p id="inputText">
        <input type="text" v-model:value="text" placeholder="请输入任务" id="inputText-text">
        <button id="inputText-bt" @click="addArr">添加任务</button>
    </p>
    <div id="arrShow">
        <p class="arrs" v-for="a,index in arr" :key="index" @mouseout="mouseout(index,a.isD)" @mouseover="mouseover(index,a.isD)">
            <span>{{index+1}}.</span>
            <span>{{a.name}}</span>
            <span @click="del(index)" :class="{disp:a.isD}">×</span>
        </p>
    </div>
    <p id="mesgP">
        <span>合计: <span style="font-size: 15px">{{arr.length}}</span></span>
        <span><a class="cle" @click="clearArr">清空任务</a></span>
    </p>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            arr: [], // 记事本内容
            text: '', // input 内容
        },
        methods: {
            clearArr() {
                //清空arr
                this.arr = []
            },
            addArr() {
                // 添加arr
                if (this.text.length > 0){
                    this.arr.push({name: this.text,isD:true})
                    this.text = ''
                }else {
                    alert("请输入任务!")
                }
            },
            mouseover(index,isD){
                // 鼠标移入
                this.arr[index].isD = false
            },
            mouseout(index,isD) {
                // 鼠标移出
                this.arr[index].isD = true
            },
            del(index){
                // 删除
                this.arr.splice(index,1)
            }
        },
        computed: {}
    })
</script>